<template>
    <a-card hoverable>
        <a-card-meta>
            <template #title>
                <span>{{ CardData.title }}</span> &nbsp;&nbsp;
                <a-tag v-if="CardData.Status == 0" color="red">待作答</a-tag>
                <a-tag v-else-if="CardData.Status == 1" color="orange">待提交</a-tag>
                <a-tag v-else-if="CardData.Status == 2" color="blue">待评分</a-tag>
                <a-tag v-else-if="CardData.Status == 3" color="green">已完成</a-tag>
            </template>
            <template #description>
                <div class="description">
                    <pre>{{ CardData.description }}</pre>
                </div>
            </template>
        </a-card-meta>
        <InspectChart :ChartData="ChartValue" />
        <template #actions>
            <div @click="download">
                <cloud-download-outlined />
                <span> 源码下载</span>
            </div>
            <div @click="preview">
                <OtherUserSelectVue :id="props.CardData.Id" :Status="props.CardData.Status" @PreviewOtherUser="PreviewOtherUser" />
            </div>
        </template>
    </a-card>
</template>
<script lang="ts" setup>
import { CloudDownloadOutlined, EyeOutlined } from '@ant-design/icons-vue'
import { onMounted, ref } from 'vue';
import InspectChart from './InspectChart.vue'
import OtherUserSelectVue from './OtherUserSelect.vue';
import apis from '@/apis/home'

const emit = defineEmits(['ShowPreview', 'DownLoadFiles', 'PreviewOtherUser'])

const props = defineProps({
    CardData: {
        type: Object,
        default: () => {
            return {
                Id: '',
                Status: '',
                titie: '',
                description: '',
                ChartData: [],
                totalPoints: 0,
            }
        }
    }
});

const ChartValue = ref<{ ChartData: never[], totalPoints: number }>({
    ChartData: props.CardData.ChartData as never[],
    totalPoints: props.CardData.totalPoints
});

function PreviewOtherUser(data: any) {
    emit('PreviewOtherUser', data);
}

function download() {
    emit('DownLoadFiles', props.CardData.Id);
}

function preview() {
    emit('ShowPreview', props.CardData.Id);
}


</script>
<style lang="less" scoped>
.description {
    height: 5em;
    margin-bottom: 5px;
    overflow: hidden;
    font-size: 12px;
}

.ChartItem {
    width: 200px;
    height: 160px;
}

.score {
    span {
        padding: 0 5px;
    }
}
</style>